<script setup lang="ts">
import { useColumnsNow } from "./columns";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getManualList, updateDownload } from "@/api/download";

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "downloadInfo"
});

// 表格数据
const downloadList = ref([]);
const loading = ref(false);

// 分页信息
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10
});

onMounted(() => {
  getDownloadListData();
});

// 获取下载列表
const getDownloadListData = async (page = 1, limit = 10) => {
  try {
    loading.value = true;
    const res: any = await getManualList(page, limit);
    console.log("API返回的完整数据:", res);
    console.log("列表数据:", res.data.list);
    // 将API数据赋值给表格
    downloadList.value = res.data.list || [];
    // 更新分页信息
    pagination.value = {
      total: res.data.total,
      page: res.data.page,
      limit: res.data.limit
    };
    console.log("赋值后的表格数据:", downloadList.value);
  } catch (error) {
    console.error("获取下载列表失败:", error);
    downloadList.value = [];
  } finally {
    loading.value = false;
  }
};

// 分页改变
const handleCurrentChange = (page: number) => {
  pagination.value.page = page;
  getDownloadListData(page, 10);
};

// 处理下载
// 处理下载
const handleDownload = async (row: any) => {
  try {
    // 1. 调用下载统计接口
    await updateDownload(row.id);

    // 2. 获取文件URL（假设row.info_url包含文件URL）
    const fileUrl = row.info_url;

    // 3. 创建隐藏的a标签进行下载
    const link = document.createElement("a");
    link.href = fileUrl;
    link.download = row.info_name || "download"; // 设置默认文件名

    // 4. 触发点击事件
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // 5. 显示成功消息
    ElMessage.success("开始下载文件");
  } catch (error) {
    console.error("下载失败:", error);
    ElMessage.error("下载失败，请重试");
  }
};

const { tableData, columns } = useColumnsNow(downloadList, handleDownload);

const isShowEditDialog = ref(false);
</script>

<template>
  <div class="container">
    <!-- 统一的白色背景容器 -->
    <div class="table-container">
      <!-- 自定义头部 -->
      <div class="custom-header">
        <div class="header-left">
          <h2 class="header-title">下载中心</h2>
        </div>
        <div class="header-right">
          <!-- 可以在这里添加按钮 -->
        </div>
      </div>

      <!-- 表格 -->
      <pure-table
        :data="tableData"
        :columns="columns"
        :loading="loading"
        stripe
        border
        class="table"
      />

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          :page-size="10"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

/* 统一的白色背景容器 */
.table-container {
  background-color: #fff;
  padding: 0 20px;
}

/* 自定义头部样式 */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.header-left .header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 表格样式 */
:deep(.el-table) {
  width: 100% !important;
  min-width: 100%;
}

/* 修改表头样式 */
:deep(.el-table__header) {
  th {
    font-weight: bold;
    background-color: #f2f2f2 !important;
  }
}

/* 修改斑马纹颜色 */
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f2f2f2 !important;
}

/* 分页样式 */
.pagination-container {
  padding: 20px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 响应式处理 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .table-container {
    padding: 0 10px;
  }

  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table__header) {
    th {
      padding: 8px 4px;
    }
  }

  :deep(.el-table__body) {
    td {
      padding: 8px 4px;
    }
  }
}
</style>
